<template>
  <el-menu
    default-active="defaultActive"
    class="el-menu-vertical-demo"
    id="leftMenu"
    router
  >
    <el-submenu index="1">
      <template slot="title">
        <i class="el-icon-location"></i>
        <span>首页管理</span>
      </template>
      <el-menu-item index="1-1">轮播图</el-menu-item>
      <el-menu-item index="1-2">分类显示</el-menu-item>
      <el-menu-item index="1-2">热销商品</el-menu-item>
    </el-submenu>
    <el-menu-item index="mainCon">
      <i class="el-icon-menu"></i>
      <span slot="title">分类管理</span>
    </el-menu-item>
    <el-menu-item index="classify">
      <i class="el-icon-menu"></i>
      <span slot="title">商品管理</span>
    </el-menu-item>
    <el-menu-item index="3">
      <i class="el-icon-document"></i>
      <span slot="title">优惠券管理</span>
    </el-menu-item>
    <el-menu-item index="4">
      <i class="el-icon-setting"></i>
      <span slot="title">用户管理</span>
    </el-menu-item>
  </el-menu>
</template>
<script>
export default {
  methods: {
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    }
  },
  computed: {
    defaultActive: function() {
      return this.$route.path.replace("/", "");
    }
  },
  mounted: function() {
    let windowH = document.documentElement.clientHeight;
    document.getElementById("leftMenu").style.height = windowH - 60 + "px";
  }
};
</script>

<style>
.el-menu-item,
.el-submenu__title {
  height: 48px;
  line-height: 48px;
}
</style>